<template>
  <div class="appointment-container">
    <!-- 顶部标题栏 -->
    <div class="header">
		<div class="back-btn" @click="goBack">←</div>
      <h1>体检预约</h1>
    </div>
    
	
	<div class="appointcard">
		<div class="appoint-image">
		  <img src="@/assets/yuyue.png" alt="体检预约">
		</div>
	</div>
	
	
    <!-- 预约类型选择 -->
    <div class="appointment-type">
      <div class="type-card" @click="goToHospital">
        
        <div class="type-content">
          <div class="type-title">个人预约</div>
          <div class="type-desc">为自己或家人预约体检</div>
        </div>
        <div class="arrow">></div>
      </div>
      
      <div class="type-card" @click="handleGroupAppointment">
        <div class="type-content">
          <div class="type-title">团检预约</div>
          <div class="type-desc">为企业或团体预约体检</div>
        </div>
        <div class="arrow">></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

// 返回上一页
const goBack = () => {
  router.back()
}

// 跳转到体检机构选择页面
const goToHospital = () => {
  router.push('/hospital')
}

const handleGroupAppointment = () => {
  alert('团检预约功能开发中...')
}
</script>

<style scoped>
.appointment-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  position: relative;
  background: white;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.back-btn{
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	cursor: pointer;
}


.header h1 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.appointcard{
	  width: 300px; 
	  display: flex;
	  justify-content: center;
	  align-items: center;
}

.appoint-image{
	max-width: 200%;
	max-height: 100%;
}

.appointment-type {
  padding: 15px;
}

.type-card {
  display: flex;
  align-items: center;
  background: white;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
}

.type-icon {
  font-size: 24px;
  margin-right: 15px;
}

.type-content {
  flex: 1;
}

.type-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.type-desc {
  font-size: 12px;
  color: #666;
}

.arrow {
  font-size: 18px;
  color: #999;
}
</style>